<template>
    <div class="container">
        <div class="channel-detail">
            <header>
                <router-link to="/">首页 / </router-link>
                <router-link :to="{ path: '/partner/company', query: { id: id }}">企业管理 / </router-link>
                <router-link :to="{ path: '/partner/companyDetail', query: { id: id }}">{{name?name:'--'}}/ </router-link>
                财务信息
            </header>
            <div v-if="messageList.length > 0" class="focus-pointer mb30">
                <div class="flex-box-align" style="padding-left: 18px; position: relative; width: 100%;">
                    今日要事：
                    <div class="message">
                        <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                            <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                                <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <main>       
              <div class="finance-filter"> 
                <div class="filter-item">
                  <div class="search-title"></div>
                    <el-select v-model="companySelect" filterable>
                        <el-option
                        label="主体公司"
                        :value="0"></el-option>
                        <el-option
                        v-for="item in companyArr"
                        :key="item.id"
                        :label="item.associatedCompanyName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <el-button type="primary" size="small" @click="handleClickSearch">查询</el-button>
                <el-button type="primary" size="small" @click="dialogFormVisible = true">添加关联公司</el-button>
              </div>       
              <div class="btn-group" v-if="active != 0">
                <div class="btn" @click="handleAdd(active)">新增</div>
              </div>
              <div class="tab">
                <div :class="{'tab-item': true, active: active == index}" v-for="(item, index) in tabConfig" :key="index">
                  <router-link :to="{ path: '/partner/financialInfo_v2/' + item.name, query: { id: id, name: name,userId:companySelect } }">{{item.text}}</router-link>
                </div>
              </div>
            </main>
            <div class="view">
              <router-view></router-view>
          </div>
          <el-dialog center title="添加关联公司" :visible.sync="dialogFormVisible">
              <el-form :model="information" :rules="rules" ref="information">
                  <el-form-item class="company-check"  label="公司名称:" :label-width="formLabelWidth" prop="associatedCompanyName">
                      <el-input
                          v-model="information.associatedCompanyName">
                      </el-input>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button :loading="btnState"  type="primary"  @click="confrimBtn('information')">{{btnState?'提交中':'提交'}}</el-button>
              </div>
          </el-dialog>
        </div>
    </div>
</template>

<script>
import CONSTANT from '../../constant/constant.js'
import common from '../../common.js'
export default {
  data() {
    return{
      dialogFormVisible:false,
      formLabelWidth:'200px',
      btnState:false,
      companySelect:'',
      information:{
        associatedCompanyName:''
      },
      num: 0,
      messageList: [],
      id:'',
      name:'',
      active: 0,
      tabConfig: [
        {
          name: 'financialReportAnalysis',
          text: '财务分析'
        },
        {
          name: 'financialBalance',
          text: '资产负债表'
        },
        {
          name: 'financialProfit',
          text: '利润表'
        },
        {
          name: 'financialCashflow',
          text: '现金流量表'
        },
        {
          name: 'financialOther',
          text: '补充信息'
        }
      ],
      rules:{ 
        associatedCompanyName :[
            {required: true, message: '请输入公司名称', trigger: 'change'  }
        ],
      },
      companyArr:[]
    }
  },
  watch: {
    $route(route) {
      this.active = this.tabConfig.findIndex( i => i.name == route.name)
    }
  },
  created() {
    this.active = this.tabConfig.findIndex( i => i.name == this.$route.name)
    let userId = this.$router.currentRoute.query.userId;
    this.companySelect = userId?JSON.parse(userId):0
    this.findCurrentCompany()
 },
  mounted(){
    this.id = this.$router.currentRoute.query.id;
    this.name = this.$router.currentRoute.query.name;
    let sessionId = common.getCookie('sessionId');
    this.getMessage()
    setInterval( () => {
        this.getMessage()
    }, 120000)
  },
  methods:{
    handleClickSearch(){
      console.log(this.$router)
      let link = this.$router.history.current.path;
      this.$router.replace({path: link, query: {id: this.id,name: this.name,userId:this.companySelect,main_path: '/financialInfo_v2'}})
    },
    confrimBtn(formName){
        this.$refs[formName].validate((valid) => {
            if (valid) {
                this.btnState = true;
                let url = CONSTANT.URL.FINANCE.SAVEASSOCIATION;
                this.information.userId = this.id
                let param = JSON.stringify(this.information);
                common.requestAjax(url, param, null, res => {
                    if(res.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                        this.btnState = false;
                        this.dialogFormVisible = false;
                        this.information.associatedCompanyName = ''
                        this.companySelect = res.data.bussData.id;
                        this.handleClickSearch()
                        this.findCurrentCompany()
                    } else {
                      this.btnState = false;
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                    }
                });
            } else {
                return false;
            }
            });
    },
    findCurrentCompany(){
        let  url = CONSTANT.URL.FINANCE.FINDCURRENTCOMPANY,
            data = {userId:this.$router.currentRoute.query.id},
            dataForm = {}
            common.requestAjax(url,data,dataForm,(res)=>{
            if(res.status == 200){
               this.companyArr = res.data.bussData;
            }else{
            
            }
        })
    },
    getMessage() {
      let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
      common.requestAjax(url, {}, {}, (data) => {
        if(data.status == 200) {
          this.messageList = data.data.bussData;
          this.showMarquee(this.num)
        }
      })
    },
    showMarquee:function (num) {
      if (!this.messageList[0]) return
      this.messageList.push(this.messageList[0]);
      var max = this.messageList.length;
      var that = this;
      let marqueetimer =  setInterval(function(){
        num++;
        if(num>=max ){
            num=0;
        }
        that.num=num*30;
      }, 2000);
    },
    handleAdd(active) {
      //根据显示不同的表的时候跳转到不同的新增页面
      const paths = ['', '/partner/financialInfo_v2/financialBalanceEdit', '/partner/financialInfo_v2/financialReportAnalysisEdit' , '/partner/financialInfo_v2/financeOperatingEdit', '/partner/financialInfo_v2/financeInfoEdit']
      paths[active] && this.$router.push({ 
        path: paths[active], 
        query: {
          userId: this.id,
          name: this.name,
          associationId:this.companySelect
        }  
      })
    }
  }
}
</script>

<style lang="scss">
a {
  color: inherit;
}


.message {
  display: block;
  position: relative;
  width: 60%;
  height: 30px;/*关键样式*/
  overflow: hidden;
}
.marquee_list{
  display: block;
  position: absolute;
  top:0;
  left: 0;
}
.marquee_top{transition: top 0.5s ;}/*关键样式*/
.marquee_list li{
  height: 30px;/*关键样式*/
  line-height: 30px;/*关键样式*/
  font-size: 14px;
  padding-left: 20px;
  background-color: #fff;
  a {
      color: #333;
  }
}
.container {
  .mb30 {
    margin-bottom: 30px;
  }
  .whiteSpace {
    white-space: nowrap;
  }
  .focus-pointer {
    font-size: 14px;
    height: 70px;
    line-height: 70px;
    background-color: #fff;
    padding-left: 18px;
    white-space: nowrap;
  }
  header {
    margin: 19px 0;
    font-size: 14px;
    color: #333;
    a {
      color: #999;
    }
  }
}
.dialog-footer{
  .el-button--primary{
    background-color: #ED7018;
    display: inline-block;
    cursor: pointer;
    border: 1px solid  #ED7018;
    &:hover{
      background-color: #ED9000;
      transition:all .2s linear
    }
  }
}
.finance-filter{
  margin-bottom: 20px;
  .el-button{
    background-color: #ED7018;
    display: inline-block;
    cursor: pointer;
    border: 1px solid  #ED7018;
    &:hover{
      background-color: #ED9000;
      transition:all .2s linear
    }
  }
  .filter-item {
    // width: %;
    display: inline-block;
    /*margin-right: 2.56%;*/
    &:last-child {
        margin-right: 0;
    }
    .search-title {
        display: inline-block;
    }
    .el-input {
        display: inline-block;
    }
    .el-select {
        width: 80%;
    }
  }
}
.company-check{
  .el-input{
    width: 250px;
  }
}
main {
  position: relative;
  margin-top: 30px;
  background-color: #fff;
  padding-left: 37px;
  padding-top: 29px;
}

.tab {
  display: flex;
  height: 28px;
  padding-bottom: 18px;
}

.btn-group {
  position: absolute;
  right: 40px;
  top: 18px;
  display: flex;
  justify-content: flex-end;
  z-index: 999;
  cursor: pointer;
}

.btn-group>.btn {
  margin-left: 50px;
  height: 40px;
  width: 100px;
  color: #ffffff;
  border-radius: 6px;
  font-size: 18px;
  line-height: 42px;
  text-align: center;
  font-weight: 400;
}

.btn-group>.btn:first-child {
  background-color: rgb(225, 132, 73);
}

.btn-group>.btn:last-child {
  background-color: rgb(44, 53, 65);
}

.tab-item {
  position: relative;
  height: 17px;
  line-height: 17px;
  font-size: 17px;
  margin-right: 29px;
  font-weight: 500;
}

.tab-item.active {
  color: rgb(225, 132, 73);
}

.tab-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  bottom: -11px;
  background-color: rgb(225, 132, 73);
}

.view {
  background-color: #ffffff;
  padding-left: 35px;
  padding-bottom: 35px;
}
</style>
